<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
	<head>
		<title>jquery.tooltip Demo</title>
		
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
		<script type="text/javascript" src="../src/external/jquery.hoverIntent.js"></script>
		<script type="text/javascript" src="../src/jquery.tooltip.js"></script>
		<style type="text/css">
			/* styles used for the generated tooltips */
			#tooltip_wrap { position: absolute; }
			#tooltip {
				float: left;
				display: block;
				position: absolute;
				  top:0; left:0;
				
				z-index: 10;
				
				padding: 2px;
				border: 1px solid #B6B6BB;
				background: white;
			}

			#tooltip_shadow {
				float: left;
				display: block;
				
				position: absolute;
				  top: 3px; left: 2px;
				  
				z-index: 9;
				
				background: #B6B6B6;
				
				filter:alpha(opacity=30); -moz-opacity:0.30; -khtml-opacity: 0.30; opacity: 0.30; 
			}

			/** */
			* {
				font-family: Arial,Verdana,sans-serif;
			}
			body {
				width: 640px;
			}
			.code {
				background-color: #d1d1d1;
				border: 1px solid #666;
				padding: 10px;
				font-family: monospace;
			}
			
			.tooltip {
				color: #990000;
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<h1>jTooltip Examples</h1>
		
		After reading through what this Plugin can do, you might want to take a look
		at the source of this document to understand what is going on...

		<h2>Tooltips from title-Attributes</h2>
		
		<p>To enable the <span class="tooltip" title="Here is a simple tooltip from a title-Attribute...">Tooltips</span>
			for any element that has a title-Attribute, simply use:
			<pre class="code">$('*[title]').tooltip();</pre>
		</p>
		<p>This of course works for any other jQuery-Selector you want to use. In this case the
			tooltip simply displays the contents of the title-Attribute for any matched element.</p>


		<h2>Tooltips with HTML-Content</h2>
		<div style="display:none;">
			<div id="tt2Contents">These tooltip-contents are stored somewhere in the <strong>DOM</strong>.</div>
		</div>
		<p>
			If you want to show a Tooltip with HTML-Contents, you can pass
			the contents to the tooltip-function as <span class="tooltip" id="tt1">text/html</span>
			or as a <span class="tooltip" id="tt2">jQuery-Object</span>.

			<pre class="code">
$('#someElement').tooltip( '...some html or text...' );
$('#someElement').tooltip( aJQueryObject );
$('#someElement').tooltip( $('#tooltipContents') );
</pre>
		</p>


		<h2>Tooltips with dynamically generated Content</h2>

		<p>You may also pass a function to generate the contents to the
		tooltip-function, the function is called in the scope of the
		DOM-Element, being passed the mouseover event-object that triggered the
		tooltip and the settings-object for the current tooltip. The result
		<span class="tooltip" id="tt3">looks like this</span>.
			<pre class="code">
$('#someElement').tooltip( function(event, settings) {
	// 'this' refers to the dom-element for which the tooltip should be displayed.
	// 'event' is the relayed mouseover-Event that initially triggered the tooltip
	// 'settings' are the settings that were used during initilization.
	
	// the function must return the contents for the tooltip either as text/html
	// or jQuery-Object
	return "these are the &lt;em&gt;contents&lt;/em&gt; for the tooltip";
});
			</pre>
		</p>
		
		<h2>even more Options...</h2>

		<p>The third way to use the tooltips is to call the tooltip-function
		with a settings-object. For a complete-list of possible settings see
		the plugin-code.
		<pre class="code">
$('#someElement').tooltip({
	contents: function(ev, settings) {
		return this.title;
	},
	extraClass: 'myTooltipClass',
	maxWidth: 250,
	posOffsetX: 3,
	posOffsetY: 3,
	sensitivity: 10,
	interval: 200,
	timeout: 100
});
</pre>
		</p>
		
		<script type="text/javascript">
			$(function() {
				// tooltips for all elements with a title	
				$('*[title]').tooltip();
				
				// custom tooltip for an element
				$('#tt1').tooltip('<h3>Tooltip Title</h3><p>Here\'s a tooltip that contains <em>HTML</em>. Anything will do...</p>');
				$('#tt2').tooltip($('#tt2Contents'));
				
				// function to generate the tooltip-contents
				function getTT3Contents(ev, s) {
					return "<p>This is an tooltip with contents generated for element"
						+ " with id <em>#"+this.id+"</em>.</p><p>Needless to say, the function"
						+ " might as well return <strong>HTML</strong> or a <strong>jQuery-Object</strong>.";
				};
				
				// custom tooltip with generated contents
				$('#tt3').tooltip(getTT3Contents);
			});
		</script>
	</body>
</html>
